<script setup lang="ts">
import zhCN from "ant-design-vue/es/locale/zh_CN";
import dayjs from "dayjs";
import {getCurrentInstance} from "vue";
import User from "~/contentScripts/views/tao/list/components/user.vue";
import {isLogin, userInfo} from "~/logic";
import SYCM from "~/utils/ali/sycm";

const visible = ref(false);
const loginVisible = ref(false);
onMounted(() => {
  userInfo()
})
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  showTotal: (total) => `共 ${total} 条`,
  change: (page) => {
    loading.value = true;
    pagination.value.current = page;
    change.value(page).then((res) => {
      loadData(res);
    })
  },
});
const loading = ref(false);
dayjs.locale('zh-cn')
const dataSource = ref([]);
const column = ref([
  {
    title: '商品',
    dataIndex: "item.title",
    dataType: "product",
    width: 200,
    fixed: "left",
    dataField: {
      item_id: 'item.itemId',
      item_title: 'item.title',
      item_pic: 'item.pictUrl',
    }
  },
]);
const sort = (a, b, k) => {
  // console.log(a, b, k);
  return a[k].value - b[k].value;
}
const change = ref<Function>();
const __option = getCurrentInstance()?.appContext.provides.option;
const handle = () => {
  if (isLogin({
    emit: () => {
      loginVisible.value = true;
    }
  }, __option)) {
    loadData();
  }
}
const slots = [];
const calcData = (res) => {
  for (let i = 0; i < res.data.length; i++) {
    // 保留两位小数
    for (const resKey in res.data[i]) {
      const element = res.data[i][resKey];
      if (typeof element === 'object' && typeof element.value === 'number') {
        element.value = element.value.toFixed(2)
      }
      if (typeof element === 'object' && typeof element.syncCrc === 'number') {
        element.syncCrc = (element.syncCrc * 100).toFixed(2)
      }
      if (resKey == 'itemStatus') {
        res.data[i][resKey] = res.data[i][resKey] == '当前在线' ? 1 : 0;
      }
    }
  }
  column.value = [
    {
      title: '商品',
      dataIndex: "item.title",
      dataType: "product",
      width: 200,
      fixed: "left",
      dataField: {
        item_id: 'item.itemId',
        item_title: 'item.title',
        item_pic: 'item.pictUrl',
      }
    },
  ];
  for (let i = 0; i < res.indexes.length; i++) {
    for (let j = 0; j < res.indexes[i].data.length; j++) {
      if (res.indexes[i].data[j].value == 'itemStatus') {
        column.value.push({
          title: res.indexes[i].data[j].text,
          dataIndex: `${res.indexes[i].data[j].value}`,
          width: (res.indexes[i].data[j].text.length * 16) + 23,
          align: "center",
          sorter: true,
          dataType: 'custom',
          slot: `${res.indexes[i].data[j].value.replaceAll('.', '_')}`,
        })
      } else {
        column.value.push({
          title: res.indexes[i].data[j].text,
          dataIndex: `${res.indexes[i].data[j].value}.value`,
          width: (res.indexes[i].data[j].text.length * 16) + 23,
          align: "center",
          sorter: (a, b) => sort(a, b, `${res.indexes[i].data[j].value}`),
          dataType: 'custom',
          slot: `${res.indexes[i].data[j].value.replaceAll('.', '_')}`,
        })
      }
      slots.push(`${res.indexes[i].data[j].value.replaceAll('.', '_')}`)
    }

  }
  dataSource.value = res.data;
  // console.log(res);
  change.value = res.pagination.change;
  pagination.value.total = res.pagination.total;
  pagination.value.current = res.pagination.current;
  visible.value = true;
}
const loadData = (data: any = null) => {
  loading.value = true;
  if (data) {
    calcData(data)
    loading.value = false;
    return;
  }
  SYCM.getItemRank().then(res => {
    calcData(res)
  }).finally(() => {
    loading.value = false;
  });
}
</script>

<template>
  <a-config-provider :locale="zhCN" prefix-cls="xc-ant">
    <a-button-group>
      <user @login="loginVisible=true" :style="{
        marginRight: '0',
      }"
      />
      <a-button type="primary" @click="handle" size="small">一键转化</a-button>
    </a-button-group>
    <a-modal v-model:visible="visible" title="品类-商品排行" :footer="null" width="95%" style="top: 40px;">
      <div style="min-height: calc(100vh - 175px);">
        <base-table :scroll="{
          y:770,
        }" :loading="loading" style="margin-top: -10px;margin-bottom: -10px;" size="small"
                    table-name="品类-商品排行" :columns="column" :data-source="dataSource"
        >
          <template #toolbar>
            <a-pagination size="small" :current="pagination.current" :pageSize="pagination.pageSize"
                          :total="pagination.total" :showTotal="pagination.showTotal"
                          @change="pagination.change"
                          style="float: right;margin-right: 10px;"
            />
          </template>
          <template #payAmt="record">
            <div>{{ record.payAmt.value }}</div>
            <div v-if="record.payAmt.syncCrc==null || typeof record.payAmt.syncCrc=='undefined'">--</div>
            <div v-else-if="record.payAmt.syncCrc>=0" style="color: #1890ff">+{{ record.payAmt.syncCrc }}%</div>
            <div v-else-if="record.payAmt.syncCrc<0" style="color: #ff4d4f">{{ record.payAmt.syncCrc }}%</div>
          </template>
          <template #payItmCnt="record">
            <div>{{ record.payItmCnt.value }}</div>
            <div v-if="record.payItmCnt.syncCrc==null || typeof record.payItmCnt.syncCrc=='undefined'">--</div>
            <div v-else-if="record.payItmCnt.syncCrc>=0" style="color: #1890ff">+{{ record.payItmCnt.syncCrc }}%</div>
            <div v-else-if="record.payItmCnt.syncCrc<0" style="color: #ff4d4f">{{ record.payItmCnt.syncCrc }}%</div>
          </template>
          <template #itemStatus="record">
            <div v-if="record.itemStatus" style="color: #1890ff">在线</div>
            <div v-else style="color: #ff4d4f">下架</div>
          </template>
          <template #sucRefundAmt="record">
            <div>{{ record.sucRefundAmt.value }}</div>
            <div v-if="record.sucRefundAmt.syncCrc==null || typeof record.sucRefundAmt.syncCrc=='undefined'">--</div>
            <div v-else-if="record.sucRefundAmt.syncCrc>=0" style="color: #1890ff">+{{ record.sucRefundAmt.syncCrc }}%
            </div>
            <div v-else-if="record.sucRefundAmt.syncCrc<0" style="color: #ff4d4f">{{
                record.sucRefundAmt.syncCrc
              }}%
            </div>
          </template>
          <template #payByrCnt="record">
            <div>{{ record.payByrCnt.value }}</div>
            <div v-if="record.payByrCnt.syncCrc==null || typeof record.payByrCnt.syncCrc=='undefined'">--</div>
            <div v-else-if="record.payByrCnt.syncCrc>=0" style="color: #1890ff">+{{ record.payByrCnt.syncCrc }}%</div>
            <div v-else-if="record.payByrCnt.syncCrc<0" style="color: #ff4d4f">{{ record.payByrCnt.syncCrc }}%</div>
          </template>
          <template #payRate="record">
            <div>{{ record.payRate.value }}</div>
            <div v-if="record.payRate.syncCrc==null || typeof record.payRate.syncCrc=='undefined'">--</div>
            <div v-else-if="record.payRate.syncCrc>=0" style="color: #1890ff">+{{ record.payRate.syncCrc }}%</div>
            <div v-else-if="record.payRate.syncCrc<0" style="color: #ff4d4f">{{ record.payRate.syncCrc }}%</div>
          </template>
          <template #itemCartCnt="record">
            <div>{{ record.itemCartCnt.value }}</div>
            <div v-if="record.itemCartCnt.syncCrc==null || typeof record.itemCartCnt.syncCrc=='undefined'">--</div>
            <div v-else-if="record.itemCartCnt.syncCrc>=0" style="color: #1890ff">+{{
                record.itemCartCnt.syncCrc
              }}%
            </div>
            <div v-else-if="record.itemCartCnt.syncCrc<0" style="color: #ff4d4f">{{ record.itemCartCnt.syncCrc }}%</div>
          </template>
          <template #itemCartByrCnt="record">
            <div>{{ record.itemCartByrCnt.value }}</div>
            <div v-if="record.itemCartByrCnt.syncCrc==null || typeof record.itemCartByrCnt.syncCrc=='undefined'">--
            </div>
            <div v-else-if="record.itemCartByrCnt.syncCrc>=0" style="color: #1890ff">
              +{{ record.itemCartByrCnt.syncCrc }}%
            </div>
            <div v-else-if="record.itemCartByrCnt.syncCrc<0" style="color: #ff4d4f">{{ record.itemCartByrCnt.syncCrc }}%
            </div>
          </template>
          <template #itemCltByrCnt="record">
            <div>{{ record.itemCltByrCnt.value }}</div>
            <div v-if="record.itemCltByrCnt.syncCrc==null || typeof record.itemCltByrCnt.syncCrc=='undefined'">--</div>
            <div v-else-if="record.itemCltByrCnt.syncCrc>=0" style="color: #1890ff">+{{ record.itemCltByrCnt.syncCrc }}%
            </div>
            <div v-else-if="record.itemCltByrCnt.syncCrc<0" style="color: #ff4d4f">{{ record.itemCltByrCnt.syncCrc }}%
            </div>
          </template>
          <template #visitCartRate="record">
            <div>{{ record.visitCartRate.value }}</div>
            <div v-if="record.visitCartRate.syncCrc==null || typeof record.visitCartRate.syncCrc=='undefined'">--</div>
            <div v-else-if="record.visitCartRate.syncCrc>=0" style="color: #1890ff">+{{ record.visitCartRate.syncCrc }}%
            </div>
            <div v-else-if="record.visitCartRate.syncCrc<0" style="color: #ff4d4f">{{ record.visitCartRate.syncCrc }}%
            </div>
          </template>
          <template #visitCltRate="record">
            <div>{{ record.visitCltRate.value }}</div>
            <div v-if="record.visitCltRate.syncCrc==null || typeof record.visitCltRate.syncCrc=='undefined'">--</div>
            <div v-else-if="record.visitCltRate.syncCrc>=0" style="color: #1890ff">+{{ record.visitCltRate.syncCrc }}%
            </div>
            <div v-else-if="record.visitCltRate.syncCrc<0" style="color: #ff4d4f">{{
                record.visitCltRate.syncCrc
              }}%
            </div>
          </template>
          <template #itmUv="record">
            <div>{{ record.itmUv.value }}</div>
            <div v-if="record.itmUv.syncCrc==null || typeof record.itmUv.syncCrc=='undefined'">--</div>
            <div v-else-if="record.itmUv.syncCrc>=0" style="color: #1890ff">+{{ record.itmUv.syncCrc }}%</div>
            <div v-else-if="record.itmUv.syncCrc<0" style="color: #ff4d4f">{{ record.itmUv.syncCrc }}%</div>
          </template>
          <template #itmPv="record">
            <div>{{ record.itmPv.value }}</div>
            <div v-if="record.itmPv.syncCrc==null || typeof record.itmPv.syncCrc=='undefined'">--</div>
            <div v-else-if="record.itmPv.syncCrc>=0" style="color: #1890ff">+{{ record.itmPv.syncCrc }}%</div>
            <div v-else-if="record.itmPv.syncCrc<0" style="color: #ff4d4f">{{ record.itmPv.syncCrc }}%</div>
          </template>
          <template #itmStayTime="record">
            <div>{{ record.itmStayTime.value }}</div>
            <div v-if="record.itmStayTime.syncCrc==null || typeof record.itmStayTime.syncCrc=='undefined'">--</div>
            <div v-else-if="record.itmStayTime.syncCrc>=0" style="color: #1890ff">+{{
                record.itmStayTime.syncCrc
              }}%
            </div>
            <div v-else-if="record.itmStayTime.syncCrc<0" style="color: #ff4d4f">{{ record.itmStayTime.syncCrc }}%</div>
          </template>
          <template #itmBounceRate="record">
            <div>{{ record.itmBounceRate.value }}</div>
            <div v-if="record.itmBounceRate.syncCrc==null || typeof record.itmBounceRate.syncCrc=='undefined'">--</div>
            <div v-else-if="record.itmBounceRate.syncCrc>=0" style="color: #1890ff">+{{
                record.itmBounceRate.syncCrc
              }}%
            </div>
            <div v-else-if="record.itmBounceRate.syncCrc<0" style="color: #ff4d4f">{{
                record.itmBounceRate.syncCrc
              }}%
            </div>
          </template>
          <template #seGuideUv="record">
            <div>{{ record.seGuideUv.value }}</div>
            <div v-if="record.seGuideUv.syncCrc==null || typeof record.seGuideUv.syncCrc=='undefined'">--</div>
            <div v-else-if="record.seGuideUv.syncCrc>=0" style="color: #1890ff">+{{ record.seGuideUv.syncCrc }}%</div>
            <div v-else-if="record.seGuideUv.syncCrc<0" style="color: #ff4d4f">{{ record.seGuideUv.syncCrc }}%</div>
          </template>
          <template #seGuidePayByrCnt="record">
            <div>{{ record.seGuidePayByrCnt.value }}</div>
            <div v-if="record.seGuidePayByrCnt.syncCrc==null || typeof record.seGuidePayByrCnt.syncCrc=='undefined'">--
            </div>
            <div v-else-if="record.seGuidePayByrCnt.syncCrc>=0" style="color: #1890ff">+{{
                record.seGuidePayByrCnt.syncCrc
              }}%
            </div>
            <div v-else-if="record.seGuidePayByrCnt.syncCrc<0" style="color: #ff4d4f">{{
                record.seGuidePayByrCnt.syncCrc
              }}%
            </div>
          </template>
          <template #seGuidePayRate="record">
            <div>{{ record.seGuidePayRate.value }}</div>
            <div v-if="record.seGuidePayRate.syncCrc==null || typeof record.seGuidePayRate.syncCrc=='undefined'">--
            </div>
            <div v-else-if="record.seGuidePayRate.syncCrc>=0" style="color: #1890ff">+{{
                record.seGuidePayRate.syncCrc
              }}%
            </div>
            <div v-else-if="record.seGuidePayRate.syncCrc<0" style="color: #ff4d4f">{{
                record.seGuidePayRate.syncCrc
              }}%
            </div>
          </template>
          <template #uvAvgValue="record">
            <div>{{ record.uvAvgValue.value }}</div>
            <div v-if="record.uvAvgValue.syncCrc==null || typeof record.uvAvgValue.syncCrc=='undefined'">--</div>
            <div v-else-if="record.uvAvgValue.syncCrc>=0" style="color: #1890ff">+{{ record.uvAvgValue.syncCrc }}%</div>
            <div v-else-if="record.uvAvgValue.syncCrc<0" style="color: #ff4d4f">{{ record.uvAvgValue.syncCrc }}%</div>
          </template>
        </base-table>
      </div>
    </a-modal>

    <user-login-modal :login-visible="loginVisible" @close="loginVisible = false"/>
  </a-config-provider>
</template>

<style scoped>

</style>
